/* Message List */
// a.k.a. notifications in the menu

.message-list {
  width: if($compact == 'true', 25.5em, 31.5em);
  text-shadow: none;
  border: solid $border;
  padding: 0;

  // padding and margins to account for scrollbar
  &:ltr { margin-left: 0; margin-right: $base_margin * 2; padding-right: $base_padding + $base_margin; border-right-width: 1px; }
  &:rtl { margin-right: 0; margin-left: $base_margin * 2; padding-left: $base_padding + $base_margin; border-left-width: 1px; }

  .message-list-placeholder {
    @extend %title_2;
    spacing: $base_spacing * 2;
    color: $text-secondary-disabled;

    // icon size and color
    > StIcon {
      icon-size: $base_icon_size * 3; // 48px
      margin-bottom: $base_margin * 3;
      -st-icon-style: symbolic;
    }
  }
}

.message-list-sections {
  margin: 0; // to account for scrollbar
  padding-bottom: $base_padding;

  // to account for scrollbar
  &:ltr { margin-right: 0; }
  &:rtl { margin-left: 0; }
}

.message-list-section,
.message-list-sections,
.message-list-section-list {
  spacing: $base_spacing;
}

// do-not-disturb + clear button
.message-list-controls {
  margin: ($base_margin * 2) ($base_margin * 4) 0;
  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
  padding: $base_padding;
  spacing: $base_padding;
}

// message bubbles
.message {
  padding: $base_padding;
  margin: $base_spacing / 2;
  border-radius: $window_radius;

  @if $colorful == 'true' {
    @include theme_bubble($theme_purple_color);
  }

  .popup-menu & {
    @if $colorful == 'true' {
      @include theme_bubble($theme_purple_color);
      border-radius: $base_radius;
    } @else {
      @extend %popover_bubble;
    }
  }

  // icon container
  .message-icon-bin {
    padding: $base_padding * 3 $base_padding * 2;

    @if $colorful == 'true' {
      color: on($theme_purple_color, disabled);
    } @else {
      color: $text-disabled;
    }

    &:ltr { padding-right: $base_padding; }
    &:rtl { padding-left: $base_padding; }

    // icon size and color
    > StIcon {
      icon-size: 32px; // 32px
      -st-icon-style: symbolic;
    }

    // fallback
    > .fallback-app-icon {
      width: 16px;
      height: 16px;
    }
  }

  .message-secondary-bin {
    padding: 0 $base_margin * 2;

    > .event-time {
      @include fontsize($font_size - 2);
      text-align: right;
      padding-bottom: 0.36em;

      @if $colorful == 'true' {
        color: on($theme_purple_color, disabled);
      } @else {
        color: $text-disabled;
      }

      &:ltr { text-align: right; }
      &:rtl { text-align: left; }
    }
  }

  .message-title {
    font-weight: bold;
    padding-top: 0.57em;

    @if $colorful == 'true' {
      color: on($theme_purple_color);
    } @else {
      color: $text;
    }
  }

  .message-content {
    padding: $base_padding;
    margin-bottom: $base_padding;
    spacing: $base_margin;

    @if $colorful == 'true' {
      color: on($theme_purple_color, disabled);
    } @else {
      color: $text-disabled;
    }
  }

  // close button
  .message-close-button {
    padding: $base_margin;
    height: $base_padding + 14px;
    width: $base_padding + 14px;
    border-radius: $circular_radius;

    &, &:hover, &:active {
      @if $colorful == 'true' {
        color: on($theme_purple_color);
      } @else {
        color: $text;
      }
    }

    &:hover, &:focus { background-color: $divider; }
    &:active { background-color: $track; }
  }

  // body
  .message-body {
    @if $colorful == 'true' {
      color: on($theme_purple_color, disabled);
    } @else {
      color: $text-disabled;
    }
  }
}

// URLs in messages
.url-highlighter {
  link-color: $link;
}

.message-media-control {
  margin: $base_padding * 2.5 + 2px $base_padding;
  padding: $base_padding * 2;
  border-radius: $circular_radius;

  @if $colorful == 'true' {
    color: on($theme_purple_color, secondary);
  } @else {
    color: $text-secondary;
  }

  &:hover, &:focus { background-color: $divider; }
  &:active { background-color: $track; }

  &:hover, &:focus, &:active {
    @if $colorful == 'true' {
      color: on($theme_purple_color);
    } @else {
      color: $text;
    }
  }

  &:insensitive {
    @if $colorful == 'true' {
      color: on($theme_green_color, disabled);
    } @else {
      color: $text-disabled;
    }
  }

  &:last-child:ltr { margin-right: $base_margin * 4; }
  &:last-child:rtl { margin-left: $base_margin * 4; }

  StIcon { icon-size: $base_icon_size; }
}

// album-art
.media-message-cover-icon {
  icon-size: $base_icon_size * 3 !important;
  border-radius: $base_radius;
  margin: 0;

  &.fallback {
    icon-size: $base_icon_size * 1.5 !important;
    padding: $base_padding;
    border: none;
    border-radius: $base_radius;
    background-color: $divider;

    @if $colorful == 'true' {
      color: on($theme_purple_color, disabled);
    } @else {
      color: $text-disabled;
    }
  }
}
